<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/financial" replace>理财管理</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/financial/financialSet" replace>标的设置</el-breadcrumb-item>
      <el-breadcrumb-item>新增标</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">新增标</div>
      <div class="table">
        <div class="title"><span>基本信息</span></div>
        <el-form :model="markInfo" size="mini" label-width="150px" label-position="left">
          <el-form-item label="标名(名字+期数)">
            <el-input v-model="markInfo.name"></el-input>
            <span>信用付【1期】</span>
          </el-form-item>
          <el-form-item label="收益率">
            <el-input v-model="markInfo.title"></el-input>
            <span>标题不能超过30个字符</span>
          </el-form-item>
          <el-form-item label="起投金额">
            <el-input v-model="markInfo.title"></el-input>
            <span>多个关键字用,隔开</span>
          </el-form-item>
          <el-form-item label="计息天数">
            <el-input v-model="markInfo.title"></el-input>
            <span>直接如数计息时间（天）</span>
          </el-form-item>
          <el-form-item label="理财的类型">
            <el-select v-model="markInfo.value" placeholder="请选择">
              <el-option v-for="item in financialOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专享客户id">
            <el-input v-model="markInfo.title"></el-input>
            <span>输入客户的用户编号</span>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary">确认保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData">
        <el-table-column prop="" label="理财标名（名称+期数）" align="center"></el-table-column>
        <el-table-column prop="" label="收益率" align="center"></el-table-column>
        <el-table-column prop="" label="起投金额" align="center"></el-table-column>
        <el-table-column prop="" label="投资期限（天）" align="center"></el-table-column>
        <el-table-column prop="" label="标的类型" align="center"></el-table-column>
        <el-table-column prop="" label="专享人" align="center"></el-table-column>
        <el-table-column prop="" label="标的状态" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        markInfo: {},
        tableData: [],
        financialOptions: []
      }
    },
    created () {
    },
    methods: {},
    components: {}
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .table{
    .title{
      margin: 0 20px;
      font-size: 18px;
      border-bottom: 1px solid #eee;
      span{
        padding: 15px 0;
        border-bottom: 2px solid #2e78f2;
        margin-bottom: -1px;
      }
    }
    .el-form{
      padding: 20px;
      .el-form-item{
        color: #666;
        /deep/ label{
          color: red;
          font-size: 16px;
        }
        span{
          font-size: 16px;
        }
        .el-input{
          width: 50%;
          padding-right: 20px;
        }
      }
    }
  }
</style>
